<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<meta name="renderer" content="webkit">-->
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <link href="http://fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="lib/layui-v2.5.5/css/layui.css">
    <link rel="stylesheet" href="css/message.css"/>
    <!--<link rel="stylesheet" href="css/layuimini.css">
   <link rel="stylesheet" href="css/public.css" media="all">-->
</head>
<body>

<div style="margin: 10px 10px 10px 10px">
    <form id="searchList" class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">留言者</label>
                <div class="layui-input-inline">
                    <input type="text" name="author" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">开始时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="startTime" id="=startTime" class="layui-input datetime">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">终止时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="endTime" id="endTime" class="layui-input datetime">
                </div>
            </div>
            <div class="layui-inline">
                <a class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                        class="layui-icon"></i> 搜 索</a>
                <a class="layui-btn layui-btn-primary" onclick="addMessage()">添加留言</a>
            </div>

        </div>
    </form>

</div>
<div class="messageBoard">

    <ul id="messageList">
        <!--<li id="0">
            <a href="#">
                <h2>Dudu：</h2>
                <p>最近咋没有美女发帖呢？我一定给个头条推荐！recommend!最近咋没有美女发帖呢？我一定给个头条推荐！
                </p>
                <p style="text-align: right">小明</p>
                <h4 style="text-align: right">2020-2-2</h4>
                <button class="remarkStyle" style="font-size: smaller" onclick="showRemark(this)">查看备注</button>
                <div style="display: none">你好小伙伴</div>
            </a>
            <button class="buttonStyle"><i class="layui-icon layui-icon-delete"></i></button>
        </li>-->
    </ul>
</div>
<script src="lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>

    layui.use(['element', 'layer', 'form', 'laydate', 'util'], function () {
        var $ = layui.jquery,
            element = layui.element,
            layer = layui.layer,
            form = layui.form,
            util = layui.util;
        var total = 0; //搜索和直接加载总数不同
        var size = 10;
        var page = 1;
        var currentSearchMessageForm;//$("#searchList").serialize() + "&page=" + searchPage;
        var searchPage = 1;
        var searchOrAll = "";
        var laydate = layui.laydate;
        //执行一个laydate实例
        /*laydate.render({
            elem: '#endTime' //指定元素
            ,type: 'datetime'
        });*/
        getMessageList($("#searchList").serialize() + "&page=" + page + "&pageSize=" + size);
        $('.datetime').each(function () {
            laydate.render({
                elem: this       //使用this指向当前元素,不能使用class名, 否则只有第一个有效
                ,type: 'datetime'
            });
        });
        form.on("submit(data-search-btn)", function (obj) {
            //console.log(obj);//obj是按钮所在的a标签
            searchPage = 1;
            //console.log($("#searchList").serialize());
            $("ul").find('li').remove();
            currentSearchMessageForm = $("#searchList").serialize();
            getMessageList(currentSearchMessageForm + "&page=" + searchPage +"&pageSize="+size);
            searchOrAll = "search";
        });
        //加载更多的按钮使用
        $(document).on('click','#showMoreMessage',function showMoreMessage(obj) {
            //console.log($(this).context);
            delLiData($(this).context.parentNode);               //删除自己li节点
            // 判断是搜索还是显示全部数据
            if (searchOrAll === "search"){
                getMessageList(currentSearchMessageForm + "&page=" + searchPage+"&pageSize="+size);

            } else {
                if(page===1){page = page + 1;}
                getMessageList("author=&startTime=&endTime=&page=" + page + "&pageSize=" + size);

            }
        });
        //删除功能
        /*$(".buttonStyle").on('click',function () {  //只能对原有的生效
            //console.log(obj);
            console.log($(this).context);
        });*/
        $(document).on('click','.buttonStyle',function (obj) {  //动态创建的也能生效
            //console.log($(this).context);
            var parentNode = $(this).context.parentNode;
            layer.confirm("确定要删除此留言吗", function (index) {
                $.ajax({
                    url: "deleteMessage",
                    data: {"id": parentNode.id},
                    type: "post",
                    success: function (result) {
                        layer.msg(result.msg);
                        delLiData(parentNode);
                    }
                })
            })
        });
        //addMessage()
        function getMessageList(formData) {
            $.ajax({
                url: "getMessageList",
                data: formData,
                type: "post",
                dataType: "json",
                success: function (result) {
                    console.log(result);
                    total = result.total;
                    //alert(result);
                    var data = result.rows;
                    if(page===1&&searchPage===1&&data.length === 0){
                        layer.msg("没有留言")
                    }else if(data.length === 0){
                        layer.msg("没有更多了");
                    }
                    for (var message in data) {
                        var reader = null;
                        if (data[message].reader != null) {
                            reader = data[message].reader + ":";
                        }
                        var createTime = util.toDateString(data[message].createtime, "yyyy-MM-dd HH:mm");
                        addLi(data[message].id, reader, data[message].message, data[message].author, createTime, data[message].remark)
                    }
                    if (searchOrAll === "search"){
                        if(searchPage * size < total){
                            addShowMore();
                            searchPage = searchPage + 1;
                        }
                    }else{
                        if(page * size < total){
                            addShowMore();
                            page = page + 1;
                        }
                    }
                }
            })
        }
    });

    //打开添加留言弹窗
    function addMessage(obj) {
        var index = layer.open({
            title: '添加留言',
            type: 2,
            shade: 0.2,
            maxmin: true,
            resize: false,  //让隐藏模块display
            shadeClose: true,
            area: ['50%', '80%'],
            content: "messageAdd.html"
        });
        /*$(window).on("resize", function () {
            layer.full(index);
        });*/
    }

    //显示备注
    function showRemark(obj) {
        //console.log(obj);
        var parentNode = obj.parentNode;
        var remark = parentNode.getElementsByTagName("div");
        console.log(remark);
        layer.alert(remark[0].innerText, {title: "备注"});
    }

    //添加节点
    function addLi(id, reader, message, author, time, remark) {
        var li = document.createElement("li");
        li.setAttribute("id",id);
        var a = document.createElement("a");
        addElem(a, reader, "h2");
        addElem(a, message, "p");
        addTextRightElem(a, author, "p");
        addTextRightElem(a, time, "h4");
        addRemarkBtn(a);
        var divElement = document.createElement("div");//保存备注信息
        divElement.setAttribute("style", "display: none");
        divElement.innerHTML = remark;
        a.appendChild(divElement);
        li.appendChild(a);
        addDelBtn(li);
        var ul = document.getElementById("messageList");
        ul.appendChild(li);
    }

    //删除节点
    function delLiData(obj) {
        var ul = document.getElementById("messageList");
        //obj.parentNode指删除按钮的li层
        ul.removeChild(obj);
    }

    //添加文本正常标签
    function addElem(a, text, elem) {
        var elem1 = document.createElement(elem);
        elem1.innerHTML = text;
        a.appendChild(elem1);
    }

    //添加文本靠右右标签
    function addTextRightElem(a, text, elem) {
        var elem1 = document.createElement(elem);
        elem1.innerHTML = text;
        elem1.setAttribute("style", "text-align: right");
        a.appendChild(elem1);
    }

    //添加删除按钮
    function addDelBtn(li) {
        var btn = document.createElement("button");
        btn.setAttribute("class", "buttonStyle");
        var i = document.createElement("i");
        i.setAttribute("class", "layui-icon layui-icon-delete");
        btn.appendChild(i);
        li.appendChild(btn);
    }

    //添加备注按钮
    function addRemarkBtn(a) {// class="remarkStyle" style="font-size: smaller" onclick="showRemark(this)">
        var btn = document.createElement("button");
        btn.setAttribute("class", "remarkStyle");
        btn.setAttribute("style", "font-size: smaller");
        btn.setAttribute("onclick", "showRemark(this)");
        btn.innerHTML = "查看备注";
        a.appendChild(btn);
    }

    //继续加载按钮
    function addShowMore() {
        var ul = document.getElementById("messageList");
        var li = document.createElement("li");
        var p = document.createElement("p");
        var a = document.createElement("a");
        a.setAttribute("id","showMoreMessage");
        var div = document.createElement("div");
        div.setAttribute("class", "layui-icon layui-icon-add-circle-fine");
        //div.setAttribute("onclick", "");
        div.innerHTML = "点击显示更多";
        p.appendChild(div);
        a.appendChild(p);
        li.appendChild(a);
        ul.appendChild(li);
    }

</script>

</body>
</html>
